React createPortal: പോർട്ടൽ നിർമ്മാണത്തിലും ഇവന്റ് കൈകാര്യം ചെയ്യുന്നതിലും വൈദഗ്ദ്ധ്യം നേടുന്നു

റിയാക്റ്റുമൊത്തുള്ള ആധുനിക വെബ് ഡെവലപ്‌മെന്റിൽ, അടിസ്ഥാന ഡോക്യുമെന്റ് ഘടനയുമായി തടസ്സമില്ലാതെ സംയോജിപ്പിക്കുന്ന യൂസർ ഇന്റർഫേസുകൾ നിർമ്മിക്കുന്നത് നിർണായകമാണ്. റിയാക്റ്റിന്റെ കമ്പോണന്റ് മോഡൽ വെർച്വൽ DOM കൈകാര്യം ചെയ്യുന്നതിൽ മികച്ചതാണെങ്കിലും, ചിലപ്പോൾ സാധാരണ കമ്പോണന്റ് ശ്രേണിക്ക് പുറത്ത് എലമെന്റുകൾ റെൻഡർ ചെയ്യേണ്ടി വരും. ഇവിടെയാണ് createPortal-ന്റെ ഉപയോഗം വരുന്നത്. ഈ ഗൈഡ് createPortal-നെക്കുറിച്ച് ആഴത്തിൽ വിശദീകരിക്കുന്നു, അതിന്റെ ഉദ്ദേശ്യം, ഉപയോഗം, ഇവന്റുകൾ കൈകാര്യം ചെയ്യുന്നതിനും സങ്കീർണ്ണമായ UI എലമെന്റുകൾ നിർമ്മിക്കുന്നതിനുമുള്ള നൂതന സാങ്കേതിക വിദ്യകൾ എന്നിവ ഉൾക്കൊള്ളുന്നു. അന്താരാഷ്ട്രവൽക്കരണ പരിഗണനകൾ, മികച്ച അക്സെസ്സിബിലിറ്റി രീതികൾ, ഒഴിവാക്കേണ്ട സാധാരണ പിഴവുകൾ എന്നിവയും നമ്മൾ ഇതിൽ ചർച്ച ചെയ്യും.

എന്താണ് React createPortal?

createPortal എന്നത് ഒരു റിയാക്ട് API ആണ്, ഇത് ഒരു റിയാക്ട് കമ്പോണന്റിന്റെ ചിൽഡ്രനെ പാരന്റ് കമ്പോണന്റിന്റെ ശ്രേണിക്ക് പുറത്ത്, DOM ട്രീയുടെ മറ്റൊരു ഭാഗത്തേക്ക് റെൻഡർ ചെയ്യാൻ നിങ്ങളെ അനുവദിക്കുന്നു. റിയാക്ട് കമ്പോണന്റ് ട്രീയിൽ എവിടെയാണെങ്കിലും, ഡോക്യുമെന്റിന്റെ ഉയർന്ന തലത്തിലോ ഒരു പ്രത്യേക കണ്ടെയ്നറിലോ സ്ഥാപിക്കേണ്ട മോഡലുകൾ, ടൂൾടിപ്പുകൾ, ഡ്രോപ്പ്ഡൗണുകൾ, ഓവർലേകൾ പോലുള്ള എലമെന്റുകൾ നിർമ്മിക്കുന്നതിന് ഇത് പ്രത്യേകിച്ചും ഉപയോഗപ്രദമാണ്.

createPortal ഇല്ലാതെ, ഇത് നേടുന്നതിന് പലപ്പോഴും DOM നേരിട്ട് കൈകാര്യം ചെയ്യുകയോ അല്ലെങ്കിൽ CSS അബ്സൊല്യൂട്ട് പൊസിഷനിംഗ് ഉപയോഗിക്കുകയോ പോലുള്ള സങ്കീർണ്ണമായ വഴികൾ ആവശ്യമായി വരും, ഇത് സ്റ്റാക്കിംഗ് കോൺടെക്സ്റ്റുകൾ, z-ഇൻഡെക്സ് പൊരുത്തക്കേടുകൾ, അക്സെസ്സിബിലിറ്റി എന്നിവയുമായി ബന്ധപ്പെട്ട പ്രശ്നങ്ങൾക്ക് കാരണമാകും.

എന്തിന് createPortal ഉപയോഗിക്കണം?

നിങ്ങളുടെ റിയാക്ട് ആയുധപ്പുരയിലെ ഒരു വിലപ്പെട്ട ഉപകരണമായി createPortal മാറുന്നതിനുള്ള പ്രധാന കാരണങ്ങൾ താഴെ പറയുന്നവയാണ്:

• മെച്ചപ്പെട്ട DOM ഘടന: DOM-നുള്ളിൽ കമ്പോണന്റുകൾ ആഴത്തിൽ നെസ്റ്റ് ചെയ്യുന്നത് ഒഴിവാക്കുന്നു, ഇത് വൃത്തിയുള്ളതും കൂടുതൽ കൈകാര്യം ചെയ്യാൻ കഴിയുന്നതുമായ ഒരു ഘടനയിലേക്ക് നയിക്കുന്നു. ധാരാളം ഇന്ററാക്ടീവ് എലമെന്റുകളുള്ള സങ്കീർണ്ണമായ ആപ്ലിക്കേഷനുകൾക്ക് ഇത് വളരെ പ്രധാനമാണ്.
• ലളിതമായ സ്റ്റൈലിംഗ്: സങ്കീർണ്ണമായ CSS തന്ത്രങ്ങളെ ആശ്രയിക്കാതെ വ്യൂപോർട്ടിനോ പ്രത്യേക കണ്ടെയ്‌നറുകൾക്കോ ആപേക്ഷികമായി എലമെന്റുകൾ എളുപ്പത്തിൽ സ്ഥാപിക്കുക. ഇത് സ്റ്റൈലിംഗും ലേഔട്ടും ലളിതമാക്കുന്നു, പ്രത്യേകിച്ചും മറ്റ് ഉള്ളടക്കത്തെ ഓവർലേ ചെയ്യേണ്ട എലമെന്റുകൾ കൈകാര്യം ചെയ്യുമ്പോൾ.
• മെച്ചപ്പെട്ട അക്സെസ്സിബിലിറ്റി: കമ്പോണന്റ് ശ്രേണിയിൽ നിന്ന് സ്വതന്ത്രമായി ഫോക്കസും കീബോർഡ് നാവിഗേഷനും കൈകാര്യം ചെയ്യാൻ നിങ്ങളെ അനുവദിക്കുന്നതിലൂടെ അക്സെസ്സിബിൾ ആയ UI-കൾ നിർമ്മിക്കാൻ സഹായിക്കുന്നു. ഉദാഹരണത്തിന്, ഒരു മോഡൽ വിൻഡോയ്ക്കുള്ളിൽ ഫോക്കസ് നിലനിർത്തുന്നത് ഉറപ്പാക്കുന്നു.
• മികച്ച ഇവന്റ് കൈകാര്യം ചെയ്യൽ: പോർട്ടലിന്റെ ഉള്ളടക്കത്തിൽ നിന്ന് റിയാക്ട് ട്രീയിലേക്ക് ഇവന്റുകൾ ശരിയായി പ്രൊപ്പഗേറ്റ് ചെയ്യാൻ അനുവദിക്കുന്നു, പാരന്റ് കമ്പോണന്റുകളിൽ ഘടിപ്പിച്ചിട്ടുള്ള ഇവന്റ് ലിസണറുകൾ പ്രതീക്ഷിച്ചതുപോലെ പ്രവർത്തിക്കുന്നുവെന്ന് ഉറപ്പാക്കുന്നു.

createPortal-ന്റെ അടിസ്ഥാന ഉപയോഗം

createPortal API രണ്ട് ആർഗ്യുമെന്റുകൾ സ്വീകരിക്കുന്നു:

1. നിങ്ങൾ റെൻഡർ ചെയ്യാൻ ആഗ്രഹിക്കുന്ന റിയാക്ട് നോഡ് (JSX).
2. നിങ്ങൾ നോഡ് റെൻഡർ ചെയ്യാൻ ആഗ്രഹിക്കുന്ന DOM എലമെന്റ്. createPortal ഉപയോഗിക്കുന്ന കമ്പോണന്റ് മൗണ്ട് ചെയ്യുന്നതിന് മുമ്പ് ഈ DOM എലമെന്റ് നിലവിലുണ്ടായിരിക്കണം.

ഇവിടെ ഒരു ലളിതമായ ഉദാഹരണം:

ഉദാഹരണം: ഒരു മോഡൽ റെൻഡർ ചെയ്യുന്നു

നിങ്ങളുടെ body എലമെന്റിന്റെ അവസാനത്തിൽ റെൻഡർ ചെയ്യാൻ ആഗ്രഹിക്കുന്ന ഒരു മോഡൽ കമ്പോണന്റ് നിങ്ങൾക്കുണ്ടെന്ന് കരുതുക.

            import React from 'react';
import ReactDOM from 'react-dom';

function Modal({ children, isOpen, onClose }) {
  if (!isOpen) return null;

  const modalRoot = document.getElementById('modal-root'); // Assumes you have a <div id="modal-root"></div> in your HTML

  if (!modalRoot) {
    console.error('Modal root element not found!');
    return null;
  }

  return ReactDOM.createPortal(
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-content" onClick={(e) => e.stopPropagation()}>
        {children}
      </div>
    </div>,
    modalRoot
  );
}

export default Modal;

            

              
                Copy
              
            
          

വിശദീകരണം:

• createPortal ഒരു ReactDOM ഒബ്ജക്റ്റിന്റെ മെത്തേഡ് ആയതുകൊണ്ട് നമ്മൾ ReactDOM ഇമ്പോർട്ട് ചെയ്യുന്നു.
• നിങ്ങളുടെ HTML-ൽ modal-root എന്ന ID ഉള്ള ഒരു DOM എലമെന്റ് ഉണ്ടെന്ന് നമ്മൾ അനുമാനിക്കുന്നു. ഇവിടെയാണ് മോഡൽ റെൻഡർ ചെയ്യപ്പെടുക. ഈ എലമെന്റ് നിലവിലുണ്ടെന്ന് ഉറപ്പാക്കുക. നിങ്ങളുടെ index.html ഫയലിലെ </body> ടാഗിന് തൊട്ടുമുമ്പായി <div id="modal-root"></div> ചേർക്കുന്നത് ഒരു സാധാരണ രീതിയാണ്.
• മോഡലിന്റെ JSX-നെ modalRoot എലമെന്റിലേക്ക് റെൻഡർ ചെയ്യാൻ നമ്മൾ ReactDOM.createPortal ഉപയോഗിക്കുന്നു.
• ഓവർലേയിലെ onClose ഹാൻഡ്‌ലർ പ്രവർത്തനക്ഷമമാക്കുന്നതിൽ നിന്ന് മോഡൽ ഉള്ളടക്കത്തിലെ onClick ഇവന്റിനെ തടയാൻ നമ്മൾ e.stopPropagation() ഉപയോഗിക്കുന്നു. ഇത് മോഡലിനുള്ളിൽ ക്ലിക്കുചെയ്യുന്നത് അത് അടയ്ക്കുന്നില്ലെന്ന് ഉറപ്പാക്കുന്നു.

ഉപയോഗം:

            import React, { useState } from 'react';
import Modal from './Modal';

function App() {
  const [isModalOpen, setIsModalOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setIsModalOpen(true)}>Open Modal</button>
      <Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}>
        <h2>Modal Content</h2>
        <p>This is the content of the modal.</p>
        <button onClick={() => setIsModalOpen(false)}>Close</button>
      </Modal>
    </div>
  );
}

export default App;

            

              
                Copy
              
            
          

സാധാരണ കമ്പോണന്റ് ശ്രേണിക്ക് പുറത്ത് ഒരു മോഡൽ എങ്ങനെ റെൻഡർ ചെയ്യാമെന്ന് ഈ ഉദാഹരണം കാണിക്കുന്നു, ഇത് പേജിൽ കൃത്യമായി സ്ഥാപിക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു. ഈ രീതിയിൽ createPortal ഉപയോഗിക്കുന്നത് സ്റ്റാക്കിംഗ് കോൺടെക്സ്റ്റുകളുമായി ബന്ധപ്പെട്ട സാധാരണ പ്രശ്നങ്ങൾ പരിഹരിക്കുകയും നിങ്ങളുടെ ആപ്ലിക്കേഷനിലുടനീളം സ്ഥിരതയുള്ള മോഡൽ സ്റ്റൈലിംഗ് എളുപ്പത്തിൽ സൃഷ്ടിക്കാൻ അനുവദിക്കുകയും ചെയ്യുന്നു.

createPortal ഉപയോഗിച്ച് ഇവന്റ് കൈകാര്യം ചെയ്യൽ

createPortal-ന്റെ പ്രധാന നേട്ടങ്ങളിലൊന്ന്, ഇത് റിയാക്റ്റിന്റെ സാധാരണ ഇവന്റ് ബബ്ലിംഗ് സ്വഭാവം നിലനിർത്തുന്നു എന്നതാണ്. ഇതിനർത്ഥം, പോർട്ടലിന്റെ ഉള്ളടക്കത്തിൽ നിന്ന് ഉത്ഭവിക്കുന്ന ഇവന്റുകൾ റിയാക്ട് കമ്പോണന്റ് ട്രീയിലേക്ക് മുകളിലേക്ക് പ്രൊപ്പഗേറ്റ് ചെയ്യും, ഇത് പാരന്റ് കമ്പോണന്റുകളെ അവ കൈകാര്യം ചെയ്യാൻ അനുവദിക്കുന്നു.

എങ്കിലും, ഇവന്റുകൾ പോർട്ടൽ അതിർത്തി കടക്കുമ്പോൾ എങ്ങനെ കൈകാര്യം ചെയ്യപ്പെടുന്നുവെന്ന് മനസ്സിലാക്കേണ്ടത് പ്രധാനമാണ്.

ഉദാഹരണം: പോർട്ടലിന് പുറത്തുള്ള ഇവന്റുകൾ കൈകാര്യം ചെയ്യുന്നു

            import React, { useState, useRef, useEffect } from 'react';
import ReactDOM from 'react-dom';

function OutsideClickExample() {
  const [isOpen, setIsOpen] = useState(false);
  const dropdownRef = useRef(null);
  const portalRoot = document.getElementById('portal-root');

  useEffect(() => {
    function handleClickOutside(event) {
      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
        setIsOpen(false);
      }
    }

    document.addEventListener('mousedown', handleClickOutside);

    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, [dropdownRef]);

  return (
    <div>
      <button onClick={() => setIsOpen(!isOpen)}>Toggle Dropdown</button>
      {isOpen && portalRoot && ReactDOM.createPortal(
        <div ref={dropdownRef} style={{ position: 'absolute', top: '50px', left: '0', border: '1px solid black', padding: '10px', backgroundColor: 'white' }}>
          Dropdown Content
        </div>,
        portalRoot
      )}
    </div>
  );
}

export default OutsideClickExample;

            

              
                Copy
              
            
          

വിശദീകരണം:

• പോർട്ടലിനുള്ളിൽ റെൻഡർ ചെയ്ത ഡ്രോപ്പ്ഡൗൺ എലമെന്റ് ആക്സസ് ചെയ്യാൻ നമ്മൾ ഒരു ref ഉപയോഗിക്കുന്നു.
• ഡ്രോപ്പ്ഡൗണിന് പുറത്തുള്ള ക്ലിക്കുകൾ കണ്ടെത്താൻ നമ്മൾ document-ൽ ഒരു mousedown ഇവന്റ് ലിസണർ ചേർക്കുന്നു.
• ഇവന്റ് ലിസണറിനുള്ളിൽ, dropdownRef.current.contains(event.target) ഉപയോഗിച്ച് ക്ലിക്ക് ഡ്രോപ്പ്ഡൗണിന് പുറത്താണോ സംഭവിച്ചതെന്ന് നമ്മൾ പരിശോധിക്കുന്നു.
• ക്ലിക്ക് ഡ്രോപ്പ്ഡൗണിന് പുറത്താണ് സംഭവിച്ചതെങ്കിൽ, isOpen-നെ false ആയി സെറ്റ് ചെയ്ത് നമ്മൾ അത് അടയ്ക്കുന്നു.

പോർട്ടലിന്റെ ഉള്ളടക്കത്തിന് പുറത്ത് സംഭവിക്കുന്ന ഇവന്റുകൾ എങ്ങനെ കൈകാര്യം ചെയ്യാമെന്ന് ഈ ഉദാഹരണം കാണിക്കുന്നു, ചുറ്റുമുള്ള ഡോക്യുമെന്റിലെ ഉപയോക്തൃ പ്രവർത്തനങ്ങളോട് പ്രതികരിക്കുന്ന ഇന്ററാക്ടീവ് എലമെന്റുകൾ സൃഷ്ടിക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു.

വിപുലമായ ഉപയോഗ സാഹചര്യങ്ങൾ

createPortal ലളിതമായ മോഡലുകളിലും ടൂൾടിപ്പുകളിലും ഒതുങ്ങുന്നില്ല. ഇത് വിവിധ വിപുലമായ സാഹചര്യങ്ങളിൽ ഉപയോഗിക്കാം, അവയിൽ ചിലത്:

• കോൺടെക്സ്റ്റ് മെനുകൾ: റൈറ്റ്-ക്ലിക്ക് ചെയ്യുമ്പോൾ മൗസ് കഴ്സറിന് സമീപം കോൺടെക്സ്റ്റ് മെനുകൾ ഡൈനാമിക്കായി റെൻഡർ ചെയ്യുക.
• അറിയിപ്പുകൾ: കമ്പോണന്റ് ശ്രേണി പരിഗണിക്കാതെ സ്ക്രീനിന്റെ മുകളിൽ അറിയിപ്പുകൾ പ്രദർശിപ്പിക്കുക.
• കസ്റ്റം പോപ്പ്ഓവറുകൾ: വിപുലമായ പൊസിഷനിംഗും സ്റ്റൈലിംഗും ഉള്ള കസ്റ്റം പോപ്പ്ഓവർ കമ്പോണന്റുകൾ നിർമ്മിക്കുക.
• തേർഡ്-പാർട്ടി ലൈബ്രറികളുമായുള്ള സംയോജനം: നിർദ്ദിഷ്ട DOM ഘടനകൾ ആവശ്യമുള്ള തേർഡ്-പാർട്ടി ലൈബ്രറികളുമായി റിയാക്ട് കമ്പോണന്റുകൾ സംയോജിപ്പിക്കാൻ createPortal ഉപയോഗിക്കുക.

ഉദാഹരണം: ഒരു കോൺടെക്സ്റ്റ് മെനു ഉണ്ടാക്കുന്നു

            import React, { useState, useRef, useEffect } from 'react';
import ReactDOM from 'react-dom';

function ContextMenuExample() {
  const [contextMenu, setContextMenu] = useState(null);
  const menuRef = useRef(null);

  useEffect(() => {
    function handleClickOutside(event) {
      if (menuRef.current && !menuRef.current.contains(event.target)) {
        setContextMenu(null);
      }
    }
    document.addEventListener('mousedown', handleClickOutside);
    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, [menuRef]);

  const handleContextMenu = (event) => {
    event.preventDefault();
    setContextMenu({
      x: event.clientX,
      y: event.clientY,
    });
  };

  const portalRoot = document.getElementById('portal-root');

  return (
    <div onContextMenu={handleContextMenu} style={{ border: '1px solid black', padding: '20px' }}>
      Right-click here to open context menu
      {contextMenu && portalRoot && ReactDOM.createPortal(
        <div
          ref={menuRef}
          style={{
            position: 'absolute',
            top: contextMenu.y,
            left: contextMenu.x,
            border: '1px solid black',
            padding: '10px',
            backgroundColor: 'white',
          }}
        >
          <ul>
            <li>Option 1</li>
            <li>Option 2</li>
            <li>Option 3</li>
          </ul>
        </div>,
        portalRoot
      )}
    </div>
  );
}

export default ContextMenuExample;

            

              
                Copy
              
            
          

വിശദീകരണം:

• ടാർഗെറ്റ് എലമെന്റിലെ റൈറ്റ്-ക്ലിക്കുകൾ കണ്ടെത്താൻ നമ്മൾ onContextMenu ഇവന്റ് ഉപയോഗിക്കുന്നു.
• event.preventDefault() ഉപയോഗിച്ച് ഡിഫോൾട്ട് കോൺടെക്സ്റ്റ് മെനു പ്രത്യക്ഷപ്പെടുന്നത് നമ്മൾ തടയുന്നു.
• മൗസ് കോർഡിനേറ്റുകൾ contextMenu സ്റ്റേറ്റ് വേരിയബിളിൽ നമ്മൾ സംഭരിക്കുന്നു.
• മൗസ് കോർഡിനേറ്റുകളിൽ സ്ഥാപിച്ചിട്ടുള്ള ഒരു പോർട്ടലിനുള്ളിൽ നമ്മൾ കോൺടെക്സ്റ്റ് മെനു റെൻഡർ ചെയ്യുന്നു.
• ഉപയോക്താവ് അതിന് പുറത്ത് ക്ലിക്ക് ചെയ്യുമ്പോൾ കോൺടെക്സ്റ്റ് മെനു അടയ്ക്കുന്നതിന് മുൻപത്തെ ഉദാഹരണത്തിലെ അതേ പുറത്തുള്ള ക്ലിക്ക് കണ്ടെത്തൽ ലോജിക് നമ്മൾ ഉൾപ്പെടുത്തുന്നു.

അക്സെസ്സിബിലിറ്റി പരിഗണനകൾ

createPortal ഉപയോഗിക്കുമ്പോൾ, നിങ്ങളുടെ ആപ്ലിക്കേഷൻ എല്ലാവർക്കും ഉപയോഗിക്കാൻ കഴിയുന്നതാണെന്ന് ഉറപ്പാക്കാൻ അക്സെസ്സിബിലിറ്റി പരിഗണിക്കേണ്ടത് അത്യാവശ്യമാണ്.

ഫോക്കസ് മാനേജ്മെന്റ്

ഒരു പോർട്ടൽ തുറക്കുമ്പോൾ (ഉദാ. ഒരു മോഡൽ), പോർട്ടലിനുള്ളിലെ ആദ്യത്തെ ഇന്ററാക്ടീവ് എലമെന്റിലേക്ക് ഫോക്കസ് സ്വയമേവ നീങ്ങുന്നുവെന്ന് നിങ്ങൾ ഉറപ്പാക്കണം. ഇത് കീബോർഡ് അല്ലെങ്കിൽ സ്ക്രീൻ റീഡർ ഉപയോഗിച്ച് നാവിഗേറ്റ് ചെയ്യുന്ന ഉപയോക്താക്കളെ പോർട്ടലിന്റെ ഉള്ളടക്കം എളുപ്പത്തിൽ ആക്സസ് ചെയ്യാൻ സഹായിക്കുന്നു.

പോർട്ടൽ അടയ്ക്കുമ്പോൾ, പോർട്ടൽ തുറക്കാൻ കാരണമായ എലമെന്റിലേക്ക് നിങ്ങൾ ഫോക്കസ് തിരികെ നൽകണം. ഇത് ഒരു സ്ഥിരതയുള്ള നാവിഗേഷൻ ഫ്ലോ നിലനിർത്തുന്നു.

ARIA ആട്രിബ്യൂട്ടുകൾ

പോർട്ടലിന്റെ ഉള്ളടക്കത്തെക്കുറിച്ചുള്ള സെമാന്റിക് വിവരങ്ങൾ നൽകാൻ ARIA ആട്രിബ്യൂട്ടുകൾ ഉപയോഗിക്കുക. ഉദാഹരണത്തിന്, മോഡൽ എലമെന്റിൽ aria-modal="true" ഉപയോഗിച്ച് അതൊരു മോഡൽ ഡയലോഗാണെന്ന് സൂചിപ്പിക്കുക. മോഡലിനെ അതിന്റെ ശീർഷകവുമായി ബന്ധിപ്പിക്കാൻ aria-labelledby ഉപയോഗിക്കുക, അതിന്റെ വിവരണവുമായി ബന്ധിപ്പിക്കാൻ aria-describedby ഉപയോഗിക്കുക.

കീബോർഡ് നാവിഗേഷൻ

ഉപയോക്താക്കൾക്ക് കീബോർഡ് ഉപയോഗിച്ച് പോർട്ടലിന്റെ ഉള്ളടക്കം നാവിഗേറ്റ് ചെയ്യാൻ കഴിയുമെന്ന് ഉറപ്പാക്കുക. ഫോക്കസ് ഓർഡർ നിയന്ത്രിക്കാൻ tabindex ആട്രിബ്യൂട്ട് ഉപയോഗിക്കുക, എല്ലാ ഇന്ററാക്ടീവ് എലമെന്റുകളും കീബോർഡ് ഉപയോഗിച്ച് എത്താൻ കഴിയുന്നതാണെന്ന് ഉറപ്പാക്കുക.

പോർട്ടലിനുള്ളിൽ ഫോക്കസ് ട്രാപ്പ് ചെയ്യുന്നത് പരിഗണിക്കുക, അങ്ങനെ ഉപയോക്താക്കൾക്ക് അബദ്ധത്തിൽ അതിന് പുറത്തേക്ക് നാവിഗേറ്റ് ചെയ്യാൻ കഴിയില്ല. Tab കീ ശ്രദ്ധിക്കുകയും പോർട്ടലിനുള്ളിലെ ആദ്യത്തെ അല്ലെങ്കിൽ അവസാനത്തെ ഇന്ററാക്ടീവ് എലമെന്റിലേക്ക് പ്രോഗ്രമാറ്റിക്കായി ഫോക്കസ് നീക്കുകയും ചെയ്തുകൊണ്ട് ഇത് നേടാനാകും.

ഉദാഹരണം: അക്സെസ്സിബിൾ മോഡൽ

            import React, { useState, useRef, useEffect } from 'react';
import ReactDOM from 'react-dom';

function AccessibleModal({ children, isOpen, onClose, labelledBy, describedBy }) {
  const modalRef = useRef(null);
  const firstFocusableElementRef = useRef(null);
  const [previouslyFocusedElement, setPreviouslyFocusedElement] = useState(null);
  const modalRoot = document.getElementById('modal-root');

  useEffect(() => {
    if (isOpen) {
      // Save the currently focused element before opening the modal.
      setPreviouslyFocusedElement(document.activeElement);

      // Focus the first focusable element in the modal.
      if (firstFocusableElementRef.current) {
        firstFocusableElementRef.current.focus();
      }

      // Trap focus within the modal.
      function handleKeyDown(event) {
        if (event.key === 'Tab') {
          const focusableElements = modalRef.current.querySelectorAll(
            'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
          );
          const firstFocusableElement = focusableElements[0];
          const lastFocusableElement = focusableElements[focusableElements.length - 1];

          if (event.shiftKey) {
            // Shift + Tab
            if (document.activeElement === firstFocusableElement) {
              lastFocusableElement.focus();
              event.preventDefault();
            }
          } else {
            // Tab
            if (document.activeElement === lastFocusableElement) {
              firstFocusableElement.focus();
              event.preventDefault();
            }
          }
        }
      }

      document.addEventListener('keydown', handleKeyDown);

      return () => {
        document.removeEventListener('keydown', handleKeyDown);
        // Restore focus to the element that had focus before opening the modal.
        if(previouslyFocusedElement && previouslyFocusedElement.focus) {
          previouslyFocusedElement.focus();
        }
      };
    }
  }, [isOpen, previouslyFocusedElement]);

  if (!isOpen) return null;

  return ReactDOM.createPortal(
    <div
      className="modal-overlay"
      onClick={onClose}
      aria-modal="true"
      aria-labelledby={labelledBy}
      aria-describedby={describedBy}
      ref={modalRef}
    >
      <div className="modal-content" onClick={(e) => e.stopPropagation()}>
        <h2 id={labelledBy}>Modal Title</h2>
        <p id={describedBy}>This is the modal content.</p>
        <button ref={firstFocusableElementRef} onClick={onClose}>
          Close
        </button>
        {children}
      </div>
    </div>,
    modalRoot
  );
}

export default AccessibleModal;

            

              
                Copy
              
            
          

വിശദീകരണം:

• മോഡലിനെക്കുറിച്ചുള്ള സെമാന്റിക് വിവരങ്ങൾ നൽകാൻ നമ്മൾ aria-modal, aria-labelledby, aria-describedby പോലുള്ള ARIA ആട്രിബ്യൂട്ടുകൾ ഉപയോഗിക്കുന്നു.
• മോഡൽ തുറക്കുമ്പോഴും അടയ്ക്കുമ്പോഴും ഫോക്കസ് കൈകാര്യം ചെയ്യാൻ നമ്മൾ useEffect ഹുക്ക് ഉപയോഗിക്കുന്നു.
• മോഡൽ തുറക്കുന്നതിന് മുമ്പ് നിലവിൽ ഫോക്കസ് ചെയ്തിരിക്കുന്ന എലമെന്റ് നമ്മൾ സേവ് ചെയ്യുകയും മോഡൽ അടയ്ക്കുമ്പോൾ അതിലേക്ക് ഫോക്കസ് പുനഃസ്ഥാപിക്കുകയും ചെയ്യുന്നു.
• ഒരു keydown ഇവന്റ് ലിസണർ ഉപയോഗിച്ച് നമ്മൾ മോഡലിനുള്ളിൽ ഫോക്കസ് ട്രാപ്പ് ചെയ്യുന്നു.

അന്താരാഷ്ട്രവൽക്കരണം (i18n) പരിഗണനകൾ

ആഗോള പ്രേക്ഷകർക്കായി ആപ്ലിക്കേഷനുകൾ വികസിപ്പിക്കുമ്പോൾ, അന്താരാഷ്ട്രവൽക്കരണം (i18n) ഒരു നിർണായക പരിഗണനയാണ്. createPortal ഉപയോഗിക്കുമ്പോൾ, മനസ്സിൽ സൂക്ഷിക്കേണ്ട ചില കാര്യങ്ങളുണ്ട്:

• ടെക്സ്റ്റ് ഡയറക്ഷൻ (RTL/LTR): നിങ്ങളുടെ സ്റ്റൈലിംഗ് ഇടത്തുനിന്ന് വലത്തോട്ടും (LTR) വലത്തുനിന്ന് ഇടത്തോട്ടും (RTL) ഉള്ള ഭാഷകളെ ഉൾക്കൊള്ളുന്നുവെന്ന് ഉറപ്പാക്കുക. ഇതിനായി CSS-ൽ ലോജിക്കൽ പ്രോപ്പർട്ടികൾ ഉപയോഗിക്കേണ്ടി വന്നേക്കാം (ഉദാഹരണത്തിന്, margin-left-ന് പകരം margin-inline-start), കൂടാതെ HTML എലമെന്റിൽ dir ആട്രിബ്യൂട്ട് ഉചിതമായി സജ്ജീകരിക്കുകയും വേണം.
• ഉള്ളടക്കത്തിന്റെ പ്രാദേശികവൽക്കരണം: പോർട്ടലിനുള്ളിലെ എല്ലാ ടെക്സ്റ്റും ഉപയോക്താവിന്റെ ഇഷ്ട ഭാഷയിലേക്ക് പ്രാദേശികവൽക്കരിക്കണം. വിവർത്തനങ്ങൾ കൈകാര്യം ചെയ്യാൻ ഒരു i18n ലൈബ്രറി (ഉദാ. react-intl, i18next) ഉപയോഗിക്കുക.
• നമ്പറും തീയതിയും ഫോർമാറ്റിംഗ്: ഉപയോക്താവിന്റെ ലൊക്കേൽ അനുസരിച്ച് നമ്പറുകളും തീയതികളും ഫോർമാറ്റ് ചെയ്യുക. Intl API ഇതിനുള്ള പ്രവർത്തനങ്ങൾ നൽകുന്നു.
• സാംസ്കാരിക കീഴ്‌വഴക്കങ്ങൾ: UI എലമെന്റുകളുമായി ബന്ധപ്പെട്ട സാംസ്കാരിക കീഴ്‌വഴക്കങ്ങളെക്കുറിച്ച് അറിഞ്ഞിരിക്കുക. ഉദാഹരണത്തിന്, ബട്ടൺ പ്ലേസ്മെന്റ് സംസ്കാരങ്ങൾക്കനുസരിച്ച് വ്യത്യാസപ്പെടാം.

ഉദാഹരണം: react-intl ഉപയോഗിച്ചുള്ള i18n

            import React from 'react';
import { FormattedMessage } from 'react-intl';

function MyComponent() {
  return (
    <div>
      <FormattedMessage id="myComponent.greeting" defaultMessage="Hello, world!" />
    </div>
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

react-intl-ൽ നിന്നുള്ള FormattedMessage കമ്പോണന്റ് ഉപയോക്താവിന്റെ ലൊക്കേൽ അടിസ്ഥാനമാക്കി വിവർത്തനം ചെയ്ത സന്ദേശം വീണ്ടെടുക്കുന്നു. വിവിധ ഭാഷകൾക്കായുള്ള നിങ്ങളുടെ വിവർത്തനങ്ങൾ ഉപയോഗിച്ച് react-intl കോൺഫിഗർ ചെയ്യുക.

സാധാരണ പിഴവുകളും പരിഹാരങ്ങളും

createPortal ഒരു ശക്തമായ ഉപകരണമാണെങ്കിലും, ചില സാധാരണ പിഴവുകളെക്കുറിച്ചും അവ എങ്ങനെ ഒഴിവാക്കാമെന്നും അറിഞ്ഞിരിക്കേണ്ടത് പ്രധാനമാണ്:

• പോർട്ടൽ റൂട്ട് എലമെന്റ് ലഭ്യമല്ലാത്തത്: createPortal ഉപയോഗിക്കുന്ന കമ്പോണന്റ് മൗണ്ട് ചെയ്യുന്നതിന് മുമ്പ് നിങ്ങൾ പോർട്ടൽ റൂട്ടായി ഉപയോഗിക്കുന്ന DOM എലമെന്റ് നിലവിലുണ്ടെന്ന് ഉറപ്പാക്കുക. അത് നേരിട്ട് index.html-ൽ സ്ഥാപിക്കുന്നത് ഒരു നല്ല രീതിയാണ്.
• Z-ഇൻഡെക്സ് പൊരുത്തക്കേടുകൾ: createPortal ഉപയോഗിച്ച് എലമെന്റുകൾ സ്ഥാപിക്കുമ്പോൾ z-ഇൻഡെക്സ് മൂല്യങ്ങളെക്കുറിച്ച് ശ്രദ്ധിക്കുക. സ്റ്റാക്കിംഗ് കോൺടെക്സ്റ്റുകൾ കൈകാര്യം ചെയ്യാനും നിങ്ങളുടെ പോർട്ടലിന്റെ ഉള്ളടക്കം ശരിയായി പ്രദർശിപ്പിക്കുന്നുവെന്ന് ഉറപ്പാക്കാനും CSS ഉപയോഗിക്കുക.
• ഇവന്റ് കൈകാര്യം ചെയ്യലിലെ പ്രശ്നങ്ങൾ: പോർട്ടലിലൂടെ ഇവന്റുകൾ എങ്ങനെ പ്രൊപ്പഗേറ്റ് ചെയ്യുന്നുവെന്ന് മനസ്സിലാക്കുകയും അവ ഉചിതമായി കൈകാര്യം ചെയ്യുകയും ചെയ്യുക. ഉദ്ദേശിക്കാത്ത പ്രവർത്തനങ്ങൾ പ്രവർത്തനക്ഷമമാക്കുന്നതിൽ നിന്ന് ഇവന്റുകളെ തടയാൻ e.stopPropagation() ഉപയോഗിക്കുക.
• മെമ്മറി ലീക്കുകൾ: മെമ്മറി ലീക്കുകൾ ഒഴിവാക്കാൻ createPortal ഉപയോഗിക്കുന്ന കമ്പോണന്റ് അൺമൗണ്ട് ചെയ്യുമ്പോൾ ഇവന്റ് ലിസണറുകളും റെഫറൻസുകളും ശരിയായി ക്ലീൻ അപ്പ് ചെയ്യുക. ഇത് നേടാൻ ഒരു ക്ലീനപ്പ് ഫംഗ്ഷനോടുകൂടിയ useEffect ഹുക്ക് ഉപയോഗിക്കുക.
• അപ്രതീക്ഷിത സ്ക്രോളിംഗ് പ്രശ്നങ്ങൾ: പോർട്ടലുകൾ ചിലപ്പോൾ പേജിന്റെ പ്രതീക്ഷിക്കുന്ന സ്ക്രോളിംഗ് സ്വഭാവത്തിൽ ഇടപെടാം. നിങ്ങളുടെ സ്റ്റൈലുകൾ സ്ക്രോളിംഗ് തടയുന്നില്ലെന്നും മോഡൽ എലമെന്റുകൾ തുറക്കുകയും അടയ്ക്കുകയും ചെയ്യുമ്പോൾ പേജ് ജമ്പുകൾക്കോ അപ്രതീക്ഷിത സ്ക്രോളിംഗ് സ്വഭാവത്തിനോ കാരണമാകുന്നില്ലെന്നും ഉറപ്പാക്കുക.

ഉപസംഹാരം

റിയാക്റ്റിൽ അയവുള്ളതും, അക്സെസ്സിബിൾ ആയതും, പരിപാലിക്കാൻ എളുപ്പമുള്ളതുമായ UI-കൾ നിർമ്മിക്കുന്നതിനുള്ള ഒരു വിലപ്പെട്ട ഉപകരണമാണ് React.createPortal. അതിന്റെ ഉദ്ദേശ്യം, ഉപയോഗം, ഇവന്റുകളും അക്സെസ്സിബിലിറ്റിയും കൈകാര്യം ചെയ്യുന്നതിനുള്ള വിപുലമായ സാങ്കേതിക വിദ്യകൾ എന്നിവ മനസ്സിലാക്കുന്നതിലൂടെ, ഒരു ആഗോള പ്രേക്ഷകർക്ക് മികച്ച ഉപയോക്തൃ അനുഭവം നൽകുന്ന സങ്കീർണ്ണവും ആകർഷകവുമായ വെബ് ആപ്ലിക്കേഷനുകൾ നിർമ്മിക്കാൻ നിങ്ങൾക്ക് അതിന്റെ ശക്തി പ്രയോജനപ്പെടുത്താം. നിങ്ങളുടെ ആപ്ലിക്കേഷനുകൾ എല്ലാവർക്കും ഉൾക്കൊള്ളുന്നതും ഉപയോഗയോഗ്യവുമാണെന്ന് ഉറപ്പാക്കാൻ അന്താരാഷ്ട്രവൽക്കരണവും അക്സെസ്സിബിലിറ്റി മികച്ച രീതികളും പരിഗണിക്കാൻ ഓർമ്മിക്കുക.

ഈ ഗൈഡിലെ മാർഗ്ഗനിർദ്ദേശങ്ങളും ഉദാഹരണങ്ങളും പിന്തുടരുന്നതിലൂടെ, സാധാരണ UI വെല്ലുവിളികൾ പരിഹരിക്കാനും അതിശയകരമായ വെബ് അനുഭവങ്ങൾ സൃഷ്ടിക്കാനും നിങ്ങൾക്ക് ആത്മവിശ്വാസത്തോടെ createPortal ഉപയോഗിക്കാൻ കഴിയും.